<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Title</title>
    <base href="<%=request.getContextPath()%>/"/>
    <script src="js/jquery-2.1.4.js"></script>
    <script src="js/jquery.form.js"></script>
    <script src="js/jquery-ui.min.js"></script>

    <style>

        .fileInput{
            margin-top:10px;
            height:120px;
            overflow: hidden;
            font-size:60px;
            position:absolute;
            background-color: #000000;
            right:0;
            top:0;
            opacity: 0;
            filter:alpha(opacity=0);
            cursor:pointer;
        }
    </style>

    <style type="text/css">
        #module_list{margin-left:4px}
        .modules{float:left; width:221px; height:165px; margin:10px; overflow:hidden; border:1px solid #acc6e9; background:#e8f5fe;position:relative;}
        .m_title{height:24px; line-height:24px; background:#afc6e9}
        #loader{height:24px; text-align:center}
        .cl{clear:both}
    </style>

</head>
<body>
<form method="post" id="yibutijiao"  enctype="multipart/form-data">

    <div class="container">
        <div id="loader"></div>
        <div id="module_list">
            <c:forEach items="${list}" var="l">
                <div class="modules" 	 title="">
                    <h3 class="m_title">Module</h3>

                    <input class="fileInput"  type="file" id="${l.id}" name="photo" onchange="change(this)">
                    <img  class="22" style=" height:141px;" src="${l.picUrl}"  />

                </div>
            </c:forEach>
        </div>
    </div>
    <button id="tijiao" onclick="aaabbb();">提交修改</button>
</form>
<script type="text/javascript">
    $(function() {
        $(".m_title").bind('mouseover', function() {
            $(this).css("cursor", "move")
        });

        var $show = $("#loader"); //进度条
        var $list = $("#module_list");

        $list.sortable({
            opacity: 0.6,
            revert: true,
            cursor: 'move',
            handle: '.m_title',
            update: function() {
                var new_order = [];
                $("#module_list").find(".22").each(function() {
                    new_order.push($(this).attr("src"));
                });
                var newid = new_order.join(',');

                $("#tijiao").click(function () {
                    $("#yibutijiao").ajaxSubmit(
                        {type: 'post', // 提交方式 get/post
                            url: 'photo/updateRank', // 需要提交的 url
                            data: {
                                'rank':newid
                            },
                            success:function(data) {
                            // data 保存提交后返回的数据，一般为 json 数据
                                // 此处可对 data 作相关处理
                                /* alert('提交成功！');
                                 window.location.href="article/mangerIndex"
                                 $(this).resetForm();*/
                                alert("success")
                                window.location.href="photo/jiuGongTu";
                            }
                        })

                })
            }
        });
    });
    function change(item) {
        var aa=$(item).attr("id");
        $("#yibutijiao").ajaxSubmit(
            {type: 'post', // 提交方式 get/post
                url: 'photo/updateById', // 需要提交的 url
                data: {
                    'id': aa
                },
                success:function(data) {
                alert("success")
                    window.location.href="photo/jiuGongTu";
                }
            })

    }


</script>
</body>
</html>